<script setup>
	import { onMounted, ref, watch } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const props = defineProps({
		status: { type: Number, default: 1 },
		categary: { type: Number, default: 1 },
	})

	const currentPage = ref(1)
	const applylist = ref([])
	async function getList() {
		const res = await http.request({
			url: '/api/shop/shopBag',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				status: props.status,
			},
		})
		console.log(res)
		applylist.value = [...applylist.value, ...res.data]
	}

	watch(
		() => props.status,
		(newstatus) => {
			console.log(newstatus)
			if (props.categary == 1) {
				currentPage.value = 1
				applylist.value = []
				getList()
			}
		},
		{ deep: true, immediate: true }
	)

	function getMore() {
		++currentPage.value
		getList()
	}

	onMounted(() => {
		currentPage.value = 1
		applylist.value = []
		getList()
	})
	// onShow(() => {
	// 	getList()
	// })
</script>

<template>
	<view class="luckybag-content">
		<scroll-view
			scroll-y="true"
			class="scroll-Y"
			@scrolltolower="getMore"
			style="height: 67vh"
		>
			<!-- 福袋列表 -->
			<view
				class=""
				style="margin-bottom: 120rpx"
				v-if="status != 1 && status != 4"
			>
				<view class="lucky-bag">
					<view
						class="lucky-sellout"
						v-for="item in applylist"
						:key="item.id"
					>
						<view class="lucky-img sell-now">
							<image
								:src="item.img"
								style="
									width: 100%;
									height: 100%;
									border-radius: 10rpx;
									background-color: #fff;
								"
								:class="{ 'set-gray': item.leftover_num == 0 }"
								mode=""
							></image>
						</view>
						<view class="lucky-tit">
							<text class="">{{ item.name }}</text>
						</view>
						<view class="lucky-money">
							<text
								class=""
								style="color: #f55860"
								:class="{ 'set-gray': item.leftover_num == 0 }"
								>￥{{ item.price }}</text
							>
						</view>
					</view>
				</view>
			</view>

			<!-- 福袋列表-审核 -->
			<view class="" style="margin-bottom: 120rpx" v-else>
				<view
					class="lucky-audit"
					v-for="item in applylist"
					:key="item.id"
				>
					<view class="audit-img">
						<image
							class=""
							:src="item.img"
							style="border-radius: 10rpx; background-color: #fff"
						></image>
					</view>
					<view class="audit-information">
						<view
							class="information-num"
							style="justify-content: space-between"
						>
							<view class="">
								<text class="">名称:</text>
								<text
									class=""
									style="margin-left: 20rpx; font-weight: 700"
									>{{ item.name }}</text
								>
							</view>
							<view
								v-if="item.status == 1"
								class=""
								style="
									justify-content: flex-end;
									color: #a378ff;
								"
								>已申请</view
							>
							<view
								v-if="item.status == 3"
								class=""
								style="justify-content: flex-end; color: red"
								>已拒绝</view
							>
						</view>
						<view class="information-num">
							<text class="">时间:</text>
							<text
								class=""
								style="margin-left: 20rpx; font-weight: 700"
							>
								{{
									parseTime(item.add_time, '{y}-{m}-{d}')
								}}</text
							>
						</view>
						<view class="information-num">
							<text class="">价格:</text>
							<text
								class=""
								style="
									color: #a378ff;
									margin-left: 20rpx;
									font-weight: 700;
								"
							>
								{{ item.price }}</text
							>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.set-gray {
		filter: grayscale(100%) !important;
	}
	.luckybag-content {
		.lucky-bag {
			display: flex;
			width: 95vw;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-bottom: 10rpx;
		}

		.lucky-sellout {
			margin-top: 20rpx;
			width: 350rpx;
			height: 270rpx;
			background-color: #fff;
			border-radius: 14rpx;
		}

		.lucky-img {
			width: 312rpx;
			height: 160rpx;
			border-radius: 10rpx;
			margin: 10rpx auto;
			// background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/sellout.png);
			// background-size: 100%;

			.sellout-icon {
				line-height: 160rpx;
				text-align: center;

				image {
					width: 109rpx;
					height: 48rpx;
				}
			}
		}

		.sell-now {
			// background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/sell-now.png);
			// background-size: 100%;
		}

		.lucky-tit {
			margin-left: 20rpx;
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #000;
		}

		.lucky-money {
			color: #808080;
			font-size: 28rpx;
			justify-content: flex-end;
			display: flex;
			margin-right: 20rpx;
		}
		.lucky-audit {
			// margin-bottom: 120rpx;
			padding: 0 19rpx;
			height: 224rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 14rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;

			.audit-img {
				// height: 224rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;

				image {
					width: 288rpx;
					height: 150rpx;
					margin-right: 20rpx;
				}
			}
		}

		.audit-information {
			width: 100%;
			height: 182rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.information-tit {
			display: flex;
		}

		.information-num {
			display: flex;
			width: 100%;
			// justify-content: space-between;
			font-size: 26rpx;
		}

		.express {
			color: #808080;
			font-size: 20rpx;
			text-align: center;
			margin-left: 10rpx;
			line-height: 37rpx;
		}

		.copy {
			background-color: #af8ef5;
			width: 52rpx;
			// line-height: 26rpx;
			border-radius: 8rpx;
			color: #fff;
			margin-left: 30rpx;
			font-size: 20rpx;
			text-align: center;
			line-height: 37rpx;
		}
	}
</style>
